import { Message } from 'element-ui'
import store from './store'
import router, { asyncRoutes } from '@/router'

import nProgress from 'nprogress' // 引入NProgress
import 'nprogress/nprogress.css' // 引入进度条的样式
import getPageTitle from '@/utils/get-page-title' // 引入 工具方法getPageTitle

// 路由守卫

// 白名单设置
const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  const token = store.state.user.token // 跳转一次重新赋值一次
  document.title = getPageTitle(to.meta.title)
  nProgress.start() // 开启进度条
  if (token) { // 有token
    if (to.path === '/login') {
      console.log('已经登录了')
      next('/')
      nProgress.done() // next如果指定了地址进行跳转，那么就不会经过router.afterEach
    } else {
      // 判断vuex中有没有用户的数据，如果没有那么就发送请求
      if (!store.state.user.userInfo.userId) {
        const menus = await store.dispatch('user/setUserInfo')
        console.log(menus)
        console.log(asyncRoutes)
        // 动态添加可以访问的路由设置
        const filterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        console.log(filterRoutes)
        router.addRoutes(filterRoutes)

        // 根据用户实际能访问几个页面来决定从整体8个路由设置
        // 中，过滤中出来几个，然后保存到vuex中
        store.commit('menu/setMenuList', filterRoutes) // 发送请求并储存用户信息在vuex
        // 白屏的问题是因为页面刷新的时候，会重新执行addRoutes,而addRoutes没有执行完成
        // 如果直接使用next()放行就会出现白屏问题，那么需要next中设置{...to,replace:true}
        // 保证addRoutes的动态路由添加完成，再访问页面
        next({ ...to, replace: true })
      } else { next() }
    }
  } else { // 没有token
    if (whiteList.includes(to.path)) {
      console.log('没有token 跳转登录页 放行')
      Message.error('请先登录')
      next()
    } else {
      console.log('没有token 没登录 在别的界面 需要跳转登录页')
      next('/login')
      nProgress.done() // 进度条关闭
    }
  }
})

router.afterEach(() => {
  nProgress.done() // 进度条关闭
})
